<template>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>
</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const init = () => {
        const $ = go.GraphObject.make


        let myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });


        myDiagram.nodeTemplate =
            $(go.Node, "Auto", // 使用Auto布局

                {
                    selectionAdorned: true,
                    background: "#44CCFF",
                    movable: true,//是否可拖动
                    deletable: true,//是否可删除
                    doubleClick: (e, node) => {

                        alert(e, node)
                    },
                }, // 设置模板样式


                $(go.Shape, "RoundedRectangle", {fill: "white"}, // 节点形状为圆角矩形，填充为白色
                    new go.Binding("fill", "color") // 绑定填充颜色到数据属性
                ),
                $(go.TextBlock, {margin: 8}, // 文本块，边距为8
                    new go.Binding("text", "text") // 绑定文本到数据属性的key字段
                )
            );


        let nodeDataArray = [
            {"category": "Comment", "loc": "60 100", "text": " Brittle", "key": -13, color: 'blue'},
            {"key": -1, "category": "End", "loc": "175 100", "text": "Start", color: 'blue'},
            {"key": 0, "loc": "0 0", "text": "Preheat oven to 375 F", color: 'blue'},
            {
                "key": 1,
                "loc": "100 100",
                "text": "In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt",
                color: 'orange'
            },
            {
                "key": 2,
                "loc": "175 200",
                "text": "Gradually beat in 1 cup sugar and 2 cups sifted flour",
                color: 'orange'
            },
            {
                "key": 3,
                "loc": "175 290",
                "text": "Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels",
                color: 'orange'
            },
            {"key": 4, "loc": "175 380", "text": "Press evenly into ungreased 15x10x1 pan", color: 'orange'},
            {"key": 5, "loc": "355 85", "text": "Finely chop 1/2 cup of your choice of nuts", color: 'orange'},
            {"key": 6, "loc": "175 450", "text": "Sprinkle nuts on top", color: 'orange'},
            {"key": 7, "loc": "175 515", "text": "Bake for 25 minutes and let cool", color: 'orange'},
            {"key": 8, "loc": "175 585", "text": "Cut into rectangular grid", color: 'orange'},
            {"key": -2, "category": "End", "loc": "175 660", "text": "Enjoy!", color: 'orange'}
        ]
        let linkDataArray = [
            {"from": 1, "to": 2, "fromPort": "B", "toPort": "T"},
            {"from": 2, "to": 3, "fromPort": "B", "toPort": "T"},
            {"from": 3, "to": 4, "fromPort": "B", "toPort": "T"},
            {"from": 4, "to": 6, "fromPort": "B", "toPort": "T"},
            {"from": 6, "to": 7, "fromPort": "B", "toPort": "T"},
            {"from": 7, "to": 8, "fromPort": "B", "toPort": "T"},
            {"from": 8, "to": -2, "fromPort": "B", "toPort": "T"},
            {"from": -1, "to": 0, "fromPort": "B", "toPort": "T"},
            {"from": -1, "to": 1, "fromPort": "B", "toPort": "T"},
            {"from": -1, "to": 5, "fromPort": "B", "toPort": "T"},
            {"from": 5, "to": 4, "fromPort": "B", "toPort": "T"},
            {"from": 0, "to": 4, "fromPort": "B", "toPort": "T"}
        ]
        //,‌ColumnSpacing: 10
        myDiagram.layout = $(go.LayeredDigraphLayout, { direction: 90 ,columnSpacing: 10, layerSpacing: 50});
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>